<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<title>Cascader</title>
	<link rel="stylesheet" href="styles/index.css" />
</head>

<body>
	<div style="display: flex; justify-content: space-between; width: 700px; margin: auto">
		<div class="cascader1"></div>
		<div class="cascader2"></div>
	</div>
	<script type="text/javascript" src="dist/index.js"></script>
	<script>
		var cascader = new Cascader(".cascader1", {
			placeholder: "please select",
			mode: "single", //multiple
			data: [
				{
					className: "sichuan",
					value: "sichuan",
					label: "Sichuan",
					showTitle: true,
					children: [
						{
							value: "chengdu",
							label: "Chengdu",
							children: [
								{
									value: "wuhouci",
									label: "Wuhou Shrine",
								},
								{
									value: "jinli",
									label: "Jinli Street",
								},
							],
						},
						{
							value: "mianyang",
							label: "Mianyang",
						},
						{
							value: "zigong",
							label: "Zigong",
						},
					],
				},
				{
					value: "zhejiang",
					label: "Zhejiang",
					children: [
						{
							value: "hangzhou",
							label: "Hangzhou",
							children: [
								{
									value: "xihu",
									label: "West Lake",
								},
							],
						},
					],
				},
				{
					value: "jiangsu",
					label: "Jiangsu",
					disabled: true,
					children: [
						{
							value: "nanjing",
							label: "Nanjing",
						},
					],
				},
				{
					value: "hongkong",
					label: "Hongkong",
				},
			],
			showClear: true,
			showSearch: true,
			// defaultValue: ["sichuan", "chengdu", "jinli"],
			onChange: function (value, labelValue, indexValue) {
				console.log(value, labelValue, indexValue);
			},
			displayRender: function (label) {
				return label.join("~");
			},
		});

		cascader.init(); //reset() setValue(Array);

		//multiple
		var cascader2 = new Cascader(".cascader2", {
			placeholder: "please select",
			mode: "multiple", //single
			data: [
				{
					className: "sichuan",
					value: "sichuan",
					label: "Sichuan",
					showTitle: true,
					children: [
						{
							value: "chengdu",
							label: "Chengdu",
							children: [
								{
									value: "wuhouci",
									label: "Wuhou Shrine",
								},
								{
									value: "jinli",
									label: "Jinli Street",
								},
							],
						},
						{
							value: "mianyang",
							label: "Mianyang",
						},
						{
							value: "zigong",
							label: "Zigong",
						},
					],
				},
				{
					value: "zhejiang",
					label: "Zhejiang",
					children: [
						{
							value: "hangzhou",
							label: "Hangzhou",
							children: [
								{
									value: "xihu",
									label: "West Lake",
								},
							],
						},
					],
				},
				{
					value: "jiangsu",
					label: "Jiangsu",
					disabled: true,
					children: [
						{
							value: "nanjing",
							label: "Nanjing",
						},
					],
				},
				{
					value: "hongkong",
					label: "Hongkong",
				},
			],
			showClear: false,
			defaultValue: [["sichuan", "mianyang"], ["sichuan", "zigong"], ["sichuan", "chengdu", "jinli"], ["sichuan", "chengdu", "wuhouci"], ["hongkong"]],
			onChange: function (value, labelValue, indexValue) {
				console.log(value, labelValue, indexValue);
			},
			displayRender: function (label) {
				return label.join("~");
			},
		});

		cascader2.init(); //reset() setValue(Array)
	</script>
</body>

</html>